<template>
	<view class="content mainpadding">
		<view class="textcenter  flexcenter xiaohei titletext bold mainpadding" style="background-color: #ffb800;">
			帳戶點數：<text v-text="allMoney"></text></view>
		<view class="text_g margin_top5 color_ling text">實付金額</view>
		<view class="price margin_top1">
			<text class="text">$</text>
			<text>{{paymoney}}</text>
		</view>
		<view class="mainpadding_top ffffff line_b9" v-if="shopInfo.appkey && shopInfo.is_sdkfp==0">
			<view class="text_weight color_san white_nowrap">發票類型
				<!-- <text style="color: #ff0000;">*</text> -->
			</view>
			<view class="margin_top1 flexbetween">
				<view :class="opentype==0?'flexleft select':'flexleft noSelect'" @click="opentype=0">
					<image class="vote1Img"
						:src="opentype==0?'@/static/images/mine/vote1_active.png':'@/static/images/mine/vote1.png'"
						mode=""></image>
					<view>紙本</view>
				</view>
				<view :class="opentype==1?'flexleft select':'flexleft noSelect'" @click="opentype=1;tbcode=zjcode;">
					<image class="vote2Img"
						:src="opentype==1?'@/static/images/mine/vote2_active.png':'@/static/images/mine/vote2.png'"
						mode=""></image>
					<view>載具</view>
				</view>
				<view :class="opentype==2?'flexleft select':'flexleft noSelect'" @click="opentype=2;tbcode=tbcode1;">
					<image class="vote3Img"
						:src="opentype==2?'@/static/images/mine/vote3_active.png':'@/static/images/mine/vote3.png'"
						mode=""></image>
					<view>統編</view>
				</view>
				<view :class="opentype==3?'flexleft select':'flexleft noSelect'" @click="opentype=3;tbcode=jzcode;">
					<image class="vote4Img"
						:src="opentype==3?'@/static/images/mine/vote4_active.png':'@/static/images/mine/vote4.png'"
						mode=""></image>
					<view>捐贈</view>
				</view>
			</view>
			<view class="invoiceInput margin_top1 flexbetween" v-show="opentype!=0">
				<input class="text_b" type="text" placeholder="請輸入手機載具" v-show="opentype==1" v-model="tbcode">
				<input class="text_b" type="text" placeholder="請輸入統一編碼" @blur="getTt()" v-show="opentype==2"
					v-model="tbcode">
				<input class="text_b" type="text" placeholder="請輸入捐贈碼" v-show="opentype==3" v-model="tbcode">
				<view class="" v-show="opentype==1 || opentype==3" @click="getCode()">
					<u-icon name="scan" color="#ffb800" size="28"></u-icon>
				</view>
			</view>
			<view class="invoiceInput margin_top1" v-show="opentype==2">
				<input class="text_b" type="text" placeholder="請輸入發票抬頭" v-model="tbmc">
			</view>
		</view>
		<view class="margin_top5 ffffff border">
			<view class="flexbetween mainpadding">
				<view class="text_g color_san">選擇支付方式</view>
			</view>
			<view class="flexbetween mainpadding line_bottom" @click="type=1">
				<view class="flexleft">
					<image class="imgBox margin_right" src="/static/images/index/payment1.png" mode=""></image>
					<view class="text_a color_san">點數支付</view>
				</view>
				<view :class="type==1?'xuanzhongs':'wiexuanzhongs'"></view>
			</view>
			<!-- linepay支付 -->
			<view class="flexbetween mainpadding line_bottom" v-if="shopInfo.linepay_status==1" @click="type=5">
				<image src="https://useradmin.opos.tw/uploads/20241014/877a9ba7a98f75b90a9d49f53f15a858.webp"
					class="radius" style="width: 50%;" mode="widthFix"></image>
				<view :class="type==5?'xuanzhongs':'wiexuanzhongs'"></view>
			</view>
			<!-- 街口支付 -->
			<view class="flexbetween mainpadding line_bottom" v-if="shopInfo.jkpay_status==1" @click="type=6">
				<image src="https://useradmin.opos.tw/uploads/20241014/c74d97b01eae257e44aa9d5bade97baf.webp"
					class="radius" style="width: 50%;" mode="widthFix"></image>
				<view :class="type==6?'xuanzhongs':'wiexuanzhongs'"></view>
			</view>
		</view>
		<view class="footer flexbetween">
			<view class="footerButton" style="width: 40%;" @click="payment">
				立即支付
			</view>
			<view class="footerButton" style="width: 40%;" @click="hongpage">
				返回首頁
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: "",
				type: 1, // 1點數支付,2多元，3现金
				paymoney: 0,
				shop_id: "",
				xj_open: 0, //現金支付是否展示0不展示1展示，
				dy_open: 0, //多元支付是否展示0不展示1展示，
				shopInfo: {},
				allMoney: 0,
				opentype: 0, //開票類型 0紙本 1載具 2統編 3捐贈
				tbcode: "", //開票内容
				tbcode1: "",
				jzcode: "",
				zjcode: "",
				tbmc: "",
			}
		},
		onLoad(options) {
			this.shop_id = options.shop_id
			this.paymoney = options.paymoney
			this.id = options.id
			this.getlist()
			this.getShopDetail()
			this.getuserInfo()
		},
		methods: {
			payment() {
				this.http.request("/api/Rechargecl/rechargeMoney", 'POST', {
					recharge_id: this.id,
					shop_id: this.shop_id,
					pay_type: this.type,
					opentype: this.opentype,
					tbcode: this.tbcode,
					tbmc: this.tbmc,
				}).then(res => {
					this.http.toast(res.msg)
					if (res.code == 1) {
						if (this.type == 1) { //linepay
							setTimeout(() => {
								uni.navigateBack(1)
							}, 1000)
						}
						if (this.type == 5) { //linepay
							location.href = res.data.web
							return false
						}
						if (this.type == 6) { //街口支付
							location.href = res.data.payment_url
							return false
						}
					}

				})
			},
			async getuserInfo() {
				let res = await this.http.request('/api/member/userInfo', 'GET', {})
				if (res.data.opentype != 0) {
					this.opentype = res.data.opentype
				}
				if (res.data.jzcode) {
					this.jzcode = res.data.jzcode
					this.tbcode = res.data.jzcode
				}
				if (res.data.tbcode) {
					this.tbcode = res.data.tbcode
					this.tbcode1 = res.data.tbcode
				}
				if (res.data.zjcode) {
					this.zjcode = res.data.zjcode
					this.tbcode = res.data.zjcode
				}
				if (this.opentype == 2) {
					this.tbcode = res.data.tbcode
				}
				uni.setStorageSync("invite_code", res.data.invite_code)
				this.tbmc = res.data.tbmc
			},
			getShopDetail() {
				let url = "/api/shop/shop"
				this.http.request(url, 'POST', {
					shop_id: this.shop_id
				}).then(res => {
					this.xj_open = res.data.xj_open
					this.dy_open = res.data.dy_open
					this.shopInfo = res.data
				})
			},
			getlist() { //獲取個人信息
				let _this = this
				this.http.request("/api/member/zcgl", 'POST', {}).then(res => {
					this.allMoney = res.data.money
				})
			},
			hongpage() {
				uni.reLaunch({
					url: "/pages/index/index"
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.price {
		font-size: 72rpx;
		font-family: DIN-Bold, DIN;
		font-weight: bold;
		color: #000000;
		text-align: center;

		.text {
			font-size: 40rpx;
		}
	}

	.imgBox {
		width: 42rpx;
		height: 42rpx;
	}

	.vote1Img {
		width: 26rpx;
		height: 26rpx;
		margin-left: 20rpx;
		margin-right: 10rpx;
	}

	.vote2Img {
		width: 23.5rpx;
		height: 23.5rpx;
		margin-left: 20rpx;
		margin-right: 10rpx;
	}

	.vote3Img {
		width: 29rpx;
		height: 29rpx;
		margin-left: 20rpx;
		margin-right: 10rpx;
	}

	.vote4Img {
		width: 27rpx;
		height: 27rpx;
		margin-left: 20rpx;
		margin-right: 10rpx;
	}


	.noSelect {
		width: 154rpx;
		height: 69rpx;
		text-align: center;
		line-height: 69rpx;
		background: rgba(102, 102, 102, .1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 2rpx solid rgba(102, 102, 102, .1);
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.select {
		width: 154rpx;
		height: 69rpx;
		text-align: center;
		line-height: 69rpx;
		background: rgba(255, 133, 5, 0.1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 2rpx solid #FF8505;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF8505;
		position: relative;
	}

	.select::after {
		content: '';
		width: 25rpx;
		height: 20rpx;
		position: absolute;
		right: 0;
		bottom: 0;
		background-image: url('/static/images/mine/invoice_select.png');
		background-size: 100% 100%;
	}

	.invoiceInput {
		width: 100%;
		height: 91rpx;
		background: rgba(196, 196, 196, .1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		display: flex;
		align-items: center;
		padding-left: 20rpx;

		input {
			width: 80%;
		}
	}
</style>